<script lang="ts" setup>
import dayjs from 'dayjs'
import { flowStat } from '@/api/visualization';
import FlowStatOption from '../options/flow-stat';
interface itemType {
  gmt_create: string,
  value: number
}

const res = await flowStat()

let xData = res.data?.pv.map((item: itemType) => dayjs(item.gmt_create).format('MM/DD'))
let pvData = res.data?.pv.map((item: itemType) => item.value)
let uvData = res.data?.uv.map((item: itemType) => item.value)

// 配置
const option = ref<any>(FlowStatOption(xData, pvData, uvData))
</script>

<template>
  <div h-86 w-96 flex="~ col" bg="[url(@/assets/image/border/FlowStatBorder.png)] no-repeat center cover">
    <div p="x-8 t-4" text="#17caf0 5.5" font="bold">流量访问统计</div>
    <EchartsContainer :option="(option)" />
  </div>
</template>
